package com.shenzhenai.jetpackcomposelayouts

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.horizontalScroll
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.Measurable
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.shenzhenai.jetpackcomposelayouts.ui.theme.DN_Compose_LearnTheme
import kotlin.math.max

/**
 * @author huangzehui
 * @date 30/7/2025 下午11:26 周三
 * @description 自定义布局 StaggeredGrid 上
 */

@Composable
fun StaggeredGridSample() {
    DN_Compose_LearnTheme {
        Scaffold { paddingValues: PaddingValues ->
            StaggeredGridBodyContent(Modifier.padding(paddingValues))
        }
    }
}

@Composable
fun StaggeredGridBodyContent(modifier: Modifier = Modifier) {
    val scrollState = rememberScrollState()
    Row(
        modifier = modifier
            .background(color = Color.LightGray)
            .padding(16.dp)
            .horizontalScroll(scrollState)
    ) {
        StaggeredGrid(modifier = Modifier, 3) {
            val topics = listOf(
                "Arts & Crafts",
                "I am hero",
                "A",
                "B",
            )
            repeat(100) {
                Chip(text = "(${it}) ${topics.random()}", modifier = Modifier.padding(8.dp))
            }
        }
    }
}

@Composable
fun StaggeredGrid(modifier: Modifier, rows: Int = 3, content: @Composable () -> Unit) {
//    Chip(text = "Arts & Crafts", modifier = modifier)
    Layout(
        modifier = modifier,
        content = content
    ) { measurables: List<Measurable>, constraints: Constraints ->

        // 每行的宽度值
        val rowWidths = IntArray(rows) { 0 }

        // 每一行的高度值
        val rowHeights = IntArray(rows) { 0 }

        val placeables = measurables.mapIndexed { index, measurable ->
            // 测量每一个元素
            val placeable = measurable.measure(constraints)
            // 计算每一行的宽度与高度
            //元素下标，假设总共11个元素
            //index:0, 1, 2, 3,4, 5,6, 7,8, 9, 10
            //行数，假设3行
            //rows：3
            //保存行宽高数组的下标值：
            //row:0,1,2
            val row = index % rows

            // 一行的宽度等于这一行所有元素宽度之和
            rowWidths[row] += placeable.width

            // 行的高度，应该是这一行中高度最高的那个元素的高度
            rowHeights[row] = max(rowHeights[row], placeable.height)
            placeable
        }


        // 计算表格的宽高
        // 表格的宽度，应该是所有行当中最宽的那一行的宽度
        val width = rowWidths.maxOrNull() ?: constraints.minWidth

        // 表格的高度，应该是所有行高度之和
        val height = rowHeights.sum()


        // 每一行的 Y 坐标
        val rowYs = IntArray(rows) { 0 }

        // 索引从1开始，因为第一行y坐标为0，row[0]=0
        for (i in 1 until rows) {
            rowYs[i] = rowYs[i - 1] + rowHeights[i - 1]
        }

        layout(width, height) {
            // 设置每一个元素的坐标

            val rowXs = IntArray(rows) { 0 }

            for ((index, placeable) in placeables.withIndex()) {
                // index:0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
                //rows:3
                //row:0,1,2, 0,1,2
                val row = index % rows

                placeable.placeRelative(rowXs[row], rowYs[row])

                // 第一列，X坐标全部为O，下一列的X坐标要累加上前面元素的宽度
                // 设置下一列的x坐标

                rowXs[row] += placeable.width
            }

        }
    }
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    text: String
) {
    // 一个卡片，圆角，里面包含一个RoW，第一列是BoX，第二列是文本

    // 卡片布局
    Card(
        modifier = modifier,
        // 设置一个边框
        border = BorderStroke(color = Color.Black, width = Dp.Hairline),
        // 设置卡片形状
        shape = RoundedCornerShape(8.dp),
    ) {
        Row(
            modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            // 定义一个正方形盒子
            Box(
                modifier = Modifier
                    // 设置盒子的大小
                    .size(16.dp)
                    // 设置背景颜色
                    .background(color = MaterialTheme.colorScheme.secondary)
            ) {

            }

            // 设置盒子和文案的间隙
            Spacer(modifier = Modifier.width(4.dp))

            // 文本
            Text(text = text)
        }


    }

}